import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
import { useSettingsStore } from '@/store';
import { useId } from 'react';

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export default function CollectSetting({ children, className, ...props }: Props) {
  const minAvailable = useSettingsStore((state) => state.gigaSettings.minAvailable);
  const hasCollectFilterPage = useSettingsStore((state) => state.gigaSettings.hasCollectFilterPage);
  const filter = useSettingsStore((state) => state.gigaSettings.filter);
  const dispatch = useSettingsStore((state) => state.dispatch);
  const id = useId();

  return (
    <div className={cn(className, 'flex flex-col')} {...props}>
      <div className="grow relative">
        <ScrollArea className="border rounded-sm !absolute h-full w-full p-2 pt-2">
          <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
            <Label className="whitespace-nowrap mb-1" htmlFor={id + '-min-available'}>
              采集时的最少库存量:
            </Label>
            <Input
              value={minAvailable}
              type="number"
              onChange={(event) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.gigaSettings.minAvailable = +event.target.value;
                  },
                });
              }}
              id={id + '-min-available'}
              className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
            />
          </div>

          <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
            <Checkbox
              checked={hasCollectFilterPage}
              onCheckedChange={(state) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.gigaSettings.hasCollectFilterPage = state ? true : false;
                  },
                });
              }}
              id={id + '-has-collect-filter-page'}
              className="rounded-[2px]"
            />
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-has-collect-filter-page'}>
              是否在筛选时进行批量采集
            </Label>
          </div>
          <div className="border border-input rounded-lg py-3 pl-2 relative mt-2">
            <span className="absolute left-5 top-0 translate-y-[-50%] px-1 text-base bg-white">
              筛选设置(这里设置的优先级较高)
            </span>
            <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
              <Label className="whitespace-nowrap w-[80px]" htmlFor={id + '-giga-filter-qty-min'}>
                最少库存:
              </Label>
              <Input
                value={filter.qty_min}
                onChange={(event) => {
                  dispatch({
                    type: 'update',
                    update(draftState) {
                      draftState.gigaSettings.filter.qty_min = event.target.value;
                    },
                  });
                }}
                id={id + '-giga-filter-qty-min'}
                className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
              />
            </div>
            <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
              <Checkbox
                checked={filter.skip_has_wishlist}
                onCheckedChange={(state) => {
                  dispatch({
                    type: 'update',
                    update(draftState) {
                      draftState.gigaSettings.filter.skip_has_wishlist = state ? true : false;
                    },
                  });
                }}
                id={id + '-filter-skip-has-wishlist'}
                className="rounded-[2px]"
              />
              <Label className="whitespace-nowrap mb-0" htmlFor={id + '-filter-skip-has-wishlist'}>
                未收藏
              </Label>
            </div>
            <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
              <Checkbox
                checked={filter.skip_has_downloaded}
                onCheckedChange={(state) => {
                  dispatch({
                    type: 'update',
                    update(draftState) {
                      draftState.gigaSettings.filter.skip_has_downloaded = state ? true : false;
                    },
                  });
                }}
                id={id + '-filter-skip-has-downloaded'}
                className="rounded-[2px]"
              />
              <Label
                className="whitespace-nowrap mb-0"
                htmlFor={id + '-filter-skip-has-downloaded'}
              >
                未下载素材包
              </Label>
            </div>
            <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
              <Checkbox
                checked={filter.skip_has_purchased}
                onCheckedChange={(state) => {
                  dispatch({
                    type: 'update',
                    update(draftState) {
                      draftState.gigaSettings.filter.skip_has_purchased = state ? true : false;
                    },
                  });
                }}
                id={id + '-filter-skip-has-skip_has_purchased'}
                className="rounded-[2px]"
              />
              <Label
                className="whitespace-nowrap mb-0"
                htmlFor={id + '-filter-skip-has-skip_has_purchased'}
              >
                未采购
              </Label>
            </div>
            <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
              <Checkbox
                checked={!filter.is_ltl}
                onCheckedChange={(state) => {
                  dispatch({
                    type: 'update',
                    update(draftState) {
                      draftState.gigaSettings.filter.is_ltl = state ? false : true;
                    },
                  });
                }}
                id={id + '-filter-skip-has-is_ltl'}
                className="rounded-[2px]"
              />
              <Label className="whitespace-nowrap mb-0" htmlFor={id + '-filter-skip-has-is_ltl'}>
                普通快递
              </Label>
            </div>
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}
